<template>
  <div id="home">
    <!-- 轮播图 -->
    <!-- <mt-swipe :auto="4000" class="swiper">
      <mt-swipe-item v-for="(item, index) in imgs" :key="index">
        <img :src="item.img" alt="lunboimg" />
      </mt-swipe-item>
    </mt-swipe> -->
    <MySwiper :url="url" myHeight="240px" />

    <!-- 九宫格 -->
    <div class="list">
      <ul>
        <li v-for="(grid, index) in grids" :key="index">
          <router-link :to="grid.router">
            <img :src="grid.src" alt="jiugongge">
            <p>{{grid.title}}</p>
          </router-link>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
  let grids = [
    {id: 1, title: "新闻资讯", router: {name: 'news.list'}, src: require('@/assets/xinwenzixun.png')},
    {id: 2, title: "图文分享", router: {name: 'photo.list', params: {categoryId: 0}}, src: require('@/assets/tuwenfenxiang.png')},
    {id: 3, title: "商品展示", router: {name: 'goods.list'}, src: require('@/assets/shangpinzhanshi.png')},
    {id: 4, title: "资讯", router: {name: 'news.list'}, src: require('@/assets/zixun.png')},
    {id: 5, title: "留言反馈", router: {name: 'MessageFeedback'}, src: require('@/assets/liuyanfankui.png')},
    {id: 6, title: "联系我们", router: {name: 'news.list'}, src: require('@/assets/lianxiwomen.png')}
  ]

export default {
  name: "Home",

  data() {
    return {
      imgs: [
        {img: require('@/assets/01.png')},
        {img: require('@/assets/02.png')},
        {img: require('@/assets/03.png')}
      ],
      grids: grids,
      url: "gethomelunbo"
    };
  }
};
</script>

/* // 这里的 scoped 表示只在当前组件起作用 （局部） */
<style lang="css" scoped>
/* 轮播图 */
/* .swiper {
  width: 100%;
  height: 240px;
}
.swiper img {
  width: 100%;
  height: 100%;
} */

/* 九宫格 */
.list{
  width: 100%;
  margin: 10px 0 40px;
}
.list ul{
  display: flex;
  flex-wrap: wrap;
}
.list ul li {
  width: 33%;
  height: 100px;
  text-align: center;
  font-size: 12px;
}
.list ul li a {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 5px 0 auto;
}
.list ul li a img {
  width: 50px;
}
</style>